<!-- 富文本编辑器(一) -->
<script lang="ts" setup>
import { defineComponent, ref, shallowRef } from 'vue'
//引入样式
import '@wangeditor/editor/dist/css/style.css'
//引入组件
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import { IToolbarConfig } from '@wangeditor/editor'
import { DomEditor } from '@wangeditor/editor'

defineComponent({
  components: { Editor, Toolbar },
})

const editorRef = shallowRef()
const valueHtml = ref('<p>hello</p>')
// const toolbarConfig: Partial<IToolbarConfig> = {} //默认全部工具栏
const toolbarConfig: Partial<IToolbarConfig> = {
  //显示和隐藏工具栏
  // toolbarKeys: [
  //   'headerSelect',
  //   '|',
  //   'bold',
  //   'italic',
  //   {
  //     key: 'group-more-style', // 必填，要以 group 开头
  //     title: '更多样式', // 必填
  //     iconSvg: '<svg>....</svg>', // 可选
  //     menuKeys: ['through', 'code', 'clearStyle'], // 下级菜单 key ，必填
  //   },
  // ],
}
const editorConfig = {}
const mode = 'default'
const handleCreated = (editor: any) => {
  console.log('created', editor)
  editorRef.value = editor // 记录 editor 实例，重要！
  //推迟获取，不然拿不到
  setTimeout(() => {
    const toolbar = DomEditor.getToolbar(editor)
    if (toolbar) {
      const curToolbarConfig = toolbar.getConfig()
      curToolbarConfig.toolbarKeys = ['headerSelect']
      console.log(curToolbarConfig.toolbarKeys)
    }
  }, 1000)
}
const handleChange = (editor: any) => {
  console.log('change:')
  console.log(editor.children)
  console.log(editor.getText())
}
</script>

<template>
  <h3>wangEditor5：自定义工具栏、菜单</h3>
  <div class="editBox">
    <Toolbar
      style="border-bottom: 1px solid #ccc"
      :editor="editorRef"
      :defaultConfig="toolbarConfig"
      :mode="mode"
    />
    <Editor
      style="height: 500px; overflow-y: hidden"
      v-model="valueHtml"
      :defaultConfig="editorConfig"
      :mode="mode"
      @onCreated="handleCreated"
      @onChange="handleChange"
    />
  </div>
</template>

<style lang="scss" scoped>
.editBox {
  border: 1px solid #ccc;
  border-top: 0;
  margin-top: 10px;
}
</style>
